<div class="search-wrap">
    <ion-header>
        <ion-toolbar>
            <ion-row>
                <ion-col class="v-middle">
                    <img class="back-icon-img" src="assets/img/back_left.png" alt="back" appDebounceClick (debounceClick)="dismiss()">
                </ion-col>
                <ion-col size="8.5">
                    <ion-searchbar placeholder="找店铺 找项目" autocomplete="on" animated onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" onInput="if(value.length>20)value=value.slice(0,20)" [(ngModel)]="keyword" (ionFocus)="focusInput()"></ion-searchbar>
                </ion-col>
                <ion-col class="v-middle">
                    <span appDebounceClick (debounceClick)="search('')">搜索</span>
                </ion-col>
            </ion-row>
        </ion-toolbar>

    </ion-header>

    <ion-content *ngIf="!hasSearched">
        <div class="clearfix" *ngFor="let item of searchArr">
            <ion-item detail="false" style="  font-size: 15px;letter-spacing: 0; color: #27282E; float:left; width: 100%;text-align: left; border-bottom: 0.55px solid #EBEBED; margin-left: 15px;--inner-border-width: 0px;" appDebounceClick (debounceClick)="search(item)">
                <ion-label>
                    <img class="icon" src="assets/img/lately.png" alt="xxx">
                    <span class="ion-label">{{item}}</span>
                </ion-label>
            </ion-item>
        </div>
        <p class="tac clearText" *ngIf="searchArr?.length>0" appDebounceClick (debounceClick)="clearHistory()">
            <img class="icon" src="assets/img/lately.png" alt="xxx">
            <span>清除历史记录</span>
        </p>
    </ion-content>
    <ion-content *ngIf="hasSearched">
        <ul class="tab-list">
            <li [class.active]="isHot" appDebounceClick (debounceClick)="tab(2, true)">
                热门
            </li>
            <li [class.active]="!isHot" appDebounceClick (debounceClick)="tab(10, false)">
                转让出租
            </li>
        </ul>
        <div class="result-list">
            <p class="clearfix" *ngIf="hasList&&isHot">
                <span class="fl">店铺转让</span>
                <a class="fr" appDebounceClick (debounceClick)="tab(10, false)">查看更多</a>
            </p>
            <app-list *ngIf="tagData && hasList" [tagData]="tagData" [ifModal]="true"></app-list>
            <p class="no-result" *ngIf="!hasList">抱歉，未找到“<i>{{keyword}}</i>”的相关结果</p>
        </div>
    </ion-content>
</div>